@import '../font/icomoon/icomoon.css';
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.custom_table-class {
  .ivu-table {
    .ivu-table-header {
      table {
        th {
          height: 30px !important;
        }
      }
    }
  }
  .ivu-table {
    .ivu-table-body {
      table td {
        height: 28px !important;
      }
    }
  }
}

.u-main-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  background-color: #fff;
  .u-content__row {
    padding: 0 15px;
    overflow-y: auto;
  }
}

.u_main {
  .panel_top_card {
    height: 190px;
    margin: 20px 0;
    margin-top: 15px;
    .panel__line {
      &.grid {
        box-sizing: border-box;
      }
      .panel__line_left,
      .panel__line_right {
        height: 100%;
        padding-right: 10px;
        box-sizing: border-box;
        &.panel__line_right {
          padding-left: 10px;
          padding-right: 0;
        }
        .left_container {
          height: 100%;
          width: 100%;
          padding: 10px;
          box-sizing: border-box;
          position: relative;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
          .title {
            position: absolute;
            left: 15px;
            top: 10px;
            font-size: 14px;
            font-weight: bold;
          }
          .link {
            position: absolute;
            right: 15px;
            top: 10px;
            font-size: 12px;
            color: #897711;
          }
          .container_card {
            box-sizing: border-box;
            display: inline-block;
            position: relative;
            width: 100%;
            margin-top: 50px;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
            border-radius: 3px;
            color: rgba(0, 0, 0, 0.87);
            background: #fff;
            .card-header {
              float: left;
              text-align: center;
              box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2);
              margin: -20px 15px 0;
              border-radius: 3px;
              [class^="icon-"] {
                font-size: 36px;
                line-height: 56px;
                width: 56px;
                height: 56px;
              }
            }
            .card-content {
              text-align: right;
              padding: 15px 20px;
              padding-top: 10px;
              .title-span {
                color: #999999;
              }
            }
          }
        }
      }
      .panel__line_right {
        height: 100%;
        padding-left: 10px;
        box-sizing: border-box;
      }
    }
  }
  .panel_middle_card {
    height: 280px;
    margin-bottom: 20px;
    .panel__line {
      &.grid {
        box-sizing: border-box;
        .panel__line_left,
        .panel__line_right {
          height: 100%;
          padding-right: 10px;
          box-sizing: border-box;
          &.panel__line_right {
            padding-left: 10px;
            padding-right: 0;
          }
          .content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            position: relative;
            padding: 10px;
            padding-top: 30px;
            .title {
              position: absolute;
              left: 15px;
              top: 10px;
              font-size: 14px;
              font-weight: bold;
            }
            .table,
            .chart {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 5px;
            }
            .chart {
              #map {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
  .panel_bottom_card {
    height: 280px;
    margin-bottom: 20px;
    .panel__line {
      &.grid {
        box-sizing: border-box;
        .panel__line_left,
        .panel__line_right {
          height: 100%;
          padding-right: 10px;
          box-sizing: border-box;
          &.panel__line_right {
            padding-left: 10px;
            padding-right: 0;
            .content {
              .card {
                padding: 5px;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                .card-container {
                  width: 100%;
                  height: 100%;
                  .left {
                    width: 78%;
                    height: 100%;
                    margin-right: 1%;
                    .card-panel {
                      width: 49%;
                      height: 99%;
                      box-sizing: border-box;
                      padding: 10px 20px;
                      color: #fff;
                      .content- {
                        text-align: center;
                        padding-top: 10px;
                        border: 1px solid #fff;
                        box-sizing: border-box;
                        .title- {
                          font-size: 14px;
                        }
                      }
                    }
                  }
                  .right {
                    width: 20%;
                    height: 98%;
                    box-sizing: border-box;
                    padding: 10px 5px;
                    display: table;
                    .card-1 {
                      display: table-cell;
                      vertical-align: middle;
                      background-color: #607D8B;
                      color: #fff;
                      text-align: center;
                      font-size: 14px;
                      .on-line {
                        font-size: 20px;
                        color: #00ff00;
                        font-weight: bold;
                      }
                    }
                  }
                }
              }
            }
          }
          .content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            position: relative;
            padding-top: 20px;
            .title {
              position: absolute;
              left: 15px;
              top: 10px;
              font-size: 14px;
              font-weight: bold;
            }
            .chart {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 5px;
              #map2 {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}

.u_device {
  width: 100%;
  height: 100%;
  .panel_top_card {
    height: 260px;
    margin-bottom: 20px;
    .grid {
      box-sizing: border-box;
      .left-card {
        height: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        .left-card-text_col {
          line-height: 2;
          .text {
            width: calc(100% - 100px);
            &.left-text {
              display: inline-block;
              width: 100px;
            }
          }
        }
        .right-card-box_col {
          height: 100%;
          line-height: 2;
          background-color: #eee;
          border-radius: 20px;
          .box {
            box-sizing: border-box;
            padding: 40px 10px;
            ul {
              width: 60%;
              height: 100%;
              margin: 0 auto;
              li {
                width: 80%;
                height: 100%;
                &:first-child {
                  margin-bottom: 10px;
                }
              }
            }
          }
        }
      }
      .right-card {
        height: 100%;
        box-sizing: border-box;
        padding: 10px 20px;
        .top-card-_col {
          text-align: center;
        }
        .right-card-box_col {
          .box {
            width: 100%;
            height: 100%;
          }
          .more-action {
            position: absolute;
            right: 5px;
            bottom: -22px;
            font-size: 12px;
            color: #007ebf;
          }
        }
      }
    }
  }
  .panel_middle_card {
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 5px 20px;
    .grid {
      &:hover {
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        border-color: #eee;
      }
      border: 1px solid #dcdee2;
      border-color: #e8eaec;
      border-radius: 4px;
      .top-content {
        margin: 10px 0;
        padding-left: 40%;
        vertical-align: baseline;
        p {
          &.margin-15 {
            font-size: 12px;
          }
        }
        .margin-15 {
          margin-right: 15px;
        }
        .top-content_title {
          text-align: right;
          &.margin-15 {
            h3 {
              font-size: 14px;
              font-weight: bold;
              display: inline;
            }
          }
        }
        .top-content__sub {
          padding: 0 20px;
          text-align: center;
          div {
            font-size: 12px;
          }
          span {
            font-size: 12px;
          }
        }
      }
      .card-status {
        height: 110px;
        .card-status_row {
          .card_chart_col {
            padding: 10px;
            box-sizing: border-box;
            height: 100%;
            .box {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 10px;
              position: relative;
              border-radius: 2px;
              overflow: hidden;
              background: white; // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
              box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
              &:before,
              &:after {
                content: "";
                position: absolute;
                z-index: -1;
              }
              &:before,
              &:after {
                content: "";
                position: absolute;
                z-index: -1;
                bottom: 15px;
                left: 10px;
                width: 50%;
                height: 20%;
              }
              &:before,
              &:after {
                content: "";
                position: absolute;
                z-index: -1;
                bottom: 15px;
                left: 10px;
                width: 50%;
                height: 20%;
                box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
                transform: rotate(-3deg);
              }
              &:after {
                right: 10px;
                left: auto;
                transform: rotate(3deg);
              }
              .box-image {
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                width: 74px;
                margin-right: 10px;
                height: 100%;
                padding: 10px;
                text-align: center;
                float: left;
                overflow: hidden;
                [class^="icon-"] {
                  position: absolute;
                  display: block;
                  left: 47px;
                  top: 50%;
                  text-align: center;
                  transform: translate(-50%, -50%);
                  font-size: 44px;
                  border-radius: 50%; // border: 3px solid #fff;
                  color: #fff;
                }
              }
              .smallstat-title {
                color: #c7cbd5;
                display: block;
                font-size: 14px;
                margin-top: 4px;
              }
              .smallstat-value {
                font-size: 20px;
                font-weight: 700;
              }
            }
            &.zhengchang {
              .box {
                .box-image {
                  background: #34b828;
                  [class^="icon-"] {
                    &.icon-wendu1:before {
                      color: #fff;
                    }
                    &.icon-wendu:before {
                      color: #fff;
                    }
                  }
                }
              }
            }
            &.yujing {
              .box {
                .box-image {
                  background-color: #FF9900;
                  [class^="icon-"] {
                    &.icon-wendu1:before {
                      color: #fff;
                    }
                    &.icon-wendu:before {
                      color: #fff;
                    }
                  }
                }
              }
            }
            &.gaojing {
              .box {
                .box-image {
                  background-color: #FF0000;
                  [class^="icon-"] {
                    &.icon-wendu1:before {
                      color: #fff;
                    }
                    &.icon-wendu:before {
                      color: #fff;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .card-status2 {
        height: 110px;
        .card-status2_row {
          .card-chart-col {
            padding: 10px;
            box-sizing: border-box;
            height: 100%;
            .box {
              width: 100%;
              height: 100%;
              box-sizing: border-box;
              padding: 10px;
              position: relative;
              border-radius: 2px;
              overflow: hidden;
              background: white;
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
              &:before,
              &:after {
                position: absolute;
                content: "";
                top: 100px;
                bottom: 5px;
                left: 30px;
                right: 30px;
                z-index: -1;
                box-shadow: 0 0 40px 13px #486685;
                border-radius: 100px/20px;
              }
              .box-image {
                border-radius: 2px;
                width: 74px;
                margin-right: 10px;
                height: 100%;
                padding: 10px;
                text-align: center;
                float: left;
                box-sizing: border-box;
                overflow: hidden;
                [class^="icon-"] {
                  position: absolute;
                  display: block;
                  left: 47px;
                  top: 50%;
                  text-align: center;
                  transform: translate(-50%, -50%);
                  font-size: 44px;
                  border-radius: 50%; // border: 3px solid #fff;
                  color: #fff;
                }
              }
              .smallstat-title {
                color: #c7cbd5;
                display: block;
                font-size: 14px;
                margin-top: 4px;
              }
              .smallstat-value {
                font-size: 20px;
                font-weight: 700;
              }
            }
            &.zhengchang {
              .box {
                .box-image {
                  background-color: #34b828;
                  [class^="icon-"] {
                    &.icon-wendu:before {
                      color: #fff;
                    }
                  }
                }
              }
            }
            &.yujing {
              .box {
                .box-image {
                  background-color: #FF9900;
                  [class^="icon-"] {
                    &.icon-wendu:before {
                      color: #fff;
                    }
                  }
                }
              }
            }
            &.gaojing {
              .box {
                .box-image {
                  background-color: #FF0000;
                  [class^="icon-"] {
                    &.icon-wendu:before {
                      color: #ffffff;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .panel_bottom_card {
    // margin-bottom: 20px;
    height: 300px;
    box-sizing: border-box; // padding: 5px 20px;
    padding-bottom: 20px;
    .grid {
      .chart-left {
        box-sizing: border-box;
        padding: 10px 20px;
        .w1 {
          .ivu-card-body {
            height: 100%;
            height: 100%;
          }
        }
      }
      .chart-right {
        box-sizing: border-box;
        padding: 10px 20px;
        .w1 {
          .ivu-card-body {
            height: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

.ureport-content {
  padding: 0 15px;
  box-sizing: border-box;
  .ureport-title {
    text-align: center;
    margin: 10px auto;
    h2 {
      font-size: 22px;
      font-weight: bold;
    }
  }
  .routerlinkStyle {
    cursor: pointer;
    text-decoration: none;
    display: inline;
    color: #000;
    text-align: center;
  }
  .routerlinkStyleDisable {
    cursor: text;
  }
  a.routerlinkStyleDisable:hover {
    text-decoration: none;
  }
  .text-red {
    color: #ff0000 !important;
  }
  .text-green {
    color: rgb(0, 176, 80);
  }
  .text-grey {
    color: #999999;
  }
  .routerlinkStyle:hover {
    text-decoration: underline;
    color: ff0000;
  }
  .content {
    padding: 20px;
    box-sizing: border-box;
  }
  .company {
    color: #007ebf;
  }
  .circle_normal:before {
    content: ' \25CF';
    font-size: 30px;
    color: #00ff00;
  }
  .circle_grey:before {
    content: ' \25CF';
    font-size: 30px;
    color: #999999;
  }
  .circle_warn:before {
    content: ' \25CF';
    font-size: 30px;
    color: #ffff00;
  }
  .circle_error:before {
    content: ' \25CF';
    font-size: 30px;
    color: #ff0000;
  }
  .circle_gray:before {
    content: ' \25CF';
    font-size: 30px;
    color: #999999;
  }
  .report-container h2 {
    font-size: 20px;
    font-weight: bold;
    margin: .5em 0;
    text-align: center;
  }
}

.guide-content {
  overflow-y: auto;
  padding: 40px;
  box-sizing: border-box;
  z-index: 1001;
  width: 100%;
  margin: 0 auto;
  background-color: #e9e9e9;
  .custom-mask-col {
    height: 120px;
    display: flex;
    cursor: default;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 0 20px;
    .mask-detail {
      width: 100%;
      height: 100%;
      color: #1b1c1d;
      border-radius: 5px;
      text-align: center;
      vertical-align: middle;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      background-color: #fff;
      line-height: 120px;
      cursor: pointer;
      border: 1px solid rgba(34, 36, 38, .15);
      h2 {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
}

.energy-power-container {
  .ivu-table-tip {
    overflow-x: hidden;
  }
}

.el-tag {
  background-color: #8391a5;
  display: inline-block;
  padding: 0 5px;
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid transparent;
  &.el-tag--success,
  &.el-tag--zhengchang {
    background-color: rgba(18, 206, 102, .1);
    border-color: rgba(18, 206, 102, .2);
    color: #13ce66;
  }
  &.el-tag--online {
    // background-color: hsla(220, 4%, 58%, .1);
    // border-color: hsla(220, 4%, 58%, .2);
    // color: #909399;
    background-color: rgba(18, 206, 102, .1);
    border-color: rgba(18, 206, 102, .2);
    color: #13ce66;
  }
  &.el-tag--offline,
  &.el-tag--guzhang {
    background-color: hsla(220, 4%, 58%, .1);
    border-color: hsla(220, 4%, 58%, .2);
    color: #000000;
  }
  &.el-tag--yujing {
    background-color: rgba(230, 162, 60, .1);
    border-color: rgba(230, 162, 60, .2);
    color: #e6a23c;
  }
  &.el-tag--gaojing {
    background-color: hsla(0, 87%, 69%, .1);
    border-color: hsla(0, 87%, 69%, .2);
    color: #f56c6c;
  }
}

.circle_ {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  &.circle_zhengchang {
    background-color: #34b828;
  }
  &.circle_yujing {
    background-color: #FF9900;
  }
  &.circle_gaojing {
    background-color: #FF0000;
  }
}

.my_custom_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 1px solid #e9eaec;
  border-left: 1px solid #e9eaec;
  overflow: hidden;
  color: #515a6e;
  font-size: 12px;
  background-color: #fff;
  box-sizing: border-box;
  tr {
    td {
      min-width: 0;
      height: 48px;
      box-sizing: border-box;
      text-align: left;
      text-align: center;
      text-overflow: ellipsis;
      vertical-align: middle;
      border-bottom: 1px solid #e9eaec;
      border-right: 1px solid #e9eaec;
      background-color: #fff;
    }
    &:last-child {
      td {
        border-bottom: 0 none;
      }
    }
  }
  &+.ivu-table-wrapper {
    .ivu-table {
      .ivu-table-body {
        &.ivu-table-overflowX {
          overflow-x: hidden;
        }
      }
    }
  }
}

.fixed-plugin {
  position: fixed;
  top: 125px;
  right: 0px;
  width: 45px;
  background: rgba(0, 0, 0, .3);
  z-index: 1031;
  border-radius: 8px 0 0 8px;
  text-align: center;
  .custom-dropdown {
    position: relative;
    .me {
      color: #fff;
      box-sizing: border-box;
      padding: 5px;
      border-radius: 0 0 6px 6px;
      width: auto;
      &.me-2x {
        font-size: 20px;
        -webkit-animation: spin 2s linear 2s 5 alternate;
        animation: spin 2s linear infinite;
      }
    }
    .me-dropdown-menu {
      position: absolute;
      width: 290px;
      height: 310px;
      overflow: hidden;
      box-sizing: border-box;
      right: 78px;
      top: -11px !important;
      border-radius: 5px;
      transform-origin: 100% 0;
      z-index: 10;
      opacity: 1;
      transform: scale(1);
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
      &.hide {
        opacity: 0;
        display: none;
      }
    }
  }
}

.uanalyse-layout {
  .uanalyse-left {
    width: 180px;
    background: #fff;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s ease;
    ul.ivu-menu {
      &:after {
        display: none;
      }
    }
  }
  .uanalyse-right {
    width: calc(100% - 180px);
    height: 100%;
    .search-content {
      .search-panel {
        .margin-l0 {
          .ivu-form-item-content {
            margin-left: 20px !important;
          }
        }
      }
    }
    .uanalyse-r-content {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding-left: 5px;
      .-toolbar{
        padding: 10px;
        box-sizing: border-box;
      }
      .uanalyse-scroll__content {
        height: calc(100% - 84px); // padding-top: 64px;
        width: 100%;
        .uanalyse-content__row {
          overflow-y: auto;
          height: 100%;
          width: 100%;
          .active-power-map {
            height: 300px;
            width: 100%;
          }
          .energy-all_map {
            height: 280px;
            width: 100%;
            .map_pack {
              // padding: 15px;
              // box-sizing: border-box;
              width: 49%;
            }
          }
          .energy-all_single {
            height: 280px;
            width: 100%;
          }
        }
      }
    }
  }
}

.uvideo-r-content {
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f5f7f9;
  .hot-monitor {
    width: 100%;
    .monitor-top,
    .monitor-middle,
    .monitor-bottom {
      overflow: hidden;
      width: 100%;
      margin-bottom: 15px;
      h3 {
        font-size: 20px;
        font-weight: bold;
        margin-top: 5px;
        margin-left: 15px;
      }
      .top-aside {
        width: 100%;
        .aside-side {
          height: 130px;
          box-sizing: border-box;
          width: 25%;
          float: left;
          padding: 15px;
          .side-content {
            width: 100%;
            height: 100%;
            overflow: hidden;
            .ivu-card-body {
              width: 100%;
              height: 100%;
            }
            .side-content-area {
              width: 100%;
              height: 100%;
              position: relative;
              .left-area {
                height: 100%;
                background-color: rgb(45, 140, 240);
                width: 36%;
                float: left;
                line-height: 100px;
                text-align: center;
                overflow: hidden;
                &.bg1 {
                  background-color: #c5c8ce;
                }
                &.bg2 {
                  background-color: #ed4014;
                }
                &.bg3 {
                  background-color: #19be6b;
                }
                >.ivu-icon {
                  font-size: 36px;
                  color: rgb(255, 255, 255);
                  display: inline;
                }
                &:hover {
                  >.ivu-icon {
                    transition: all .3s linear;
                    font-size: 56px;
                  }
                }
              }
              .right-area {
                width: 64%;
                height: 100%;
                line-height: 2;
                text-align: center;
                float: right;
                overflow: hidden;
                .count-wrapper {
                  display: inline;
                  .content-inner {
                    display: inline-block;
                    font-size: 34px;
                  }
                }
              }
            }
          }
        }
      }
      .middle-aside,
      .bottom-aside {
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        .aside-table,
        .aside-page {
          max-height: 325px;
          width: 100%;
          &.aside-table {
            margin-bottom: 10px;
            .ivu-table-wrapper {
              //
            }
          }
          &.aside-page {
            height: auto;
            overflow: hidden;
          }
        }
      }
    }
  }
}

.uvideo-detail {
  width: 100%;
  height: 100%;
  padding: 5px;
  padding-top: 15px;
  box-sizing: border-box;
  overflow: hidden;
  .uvideo-detail-title {
    height: 40px;
    width: 100%;
    h3 {
      font-size: 20px;
      font-weight: bold;
      margin-left: 20px;
    }
  }
  .uvideo-detail-content {
    height: calc(100% - 40px);
    .left-content {
      box-sizing: border-box;
      padding: 15px;
      width: 50%;
      height: 100%;
      background-color: red;
      float: left;
    }
    .right-content {
      box-sizing: border-box;
      padding: 15px;
      float: left;
      width: 50%;
      height: 100%;
      background-color: yellow;
    }
  }
}
